<script setup lang="ts">
/**
 * 这是一个数据模型增删改查的Demo
 */

import { ref, reactive } from 'vue'
import useTable from '@/components/x-components/hooks/use-table'
import useTableHeight from '@/components/x-components/hooks/use-table-height'
import type { FormItemRule } from 'element-plus/es/tokens'
import { ElMessage } from 'element-plus'

/** 模拟一个api接口 */
const getUserList = (query) =>
	new Promise<{ msg: string; code: number; data: { rows: any[]; total: number } }>((resolve) => {
		setTimeout(() => {
			resolve({
				msg: 'ok',
				code: 0,
				data: {
					rows: Array.from({ length: query.limit }).map((it, index) => {
						let id = (query.index - 1) * query.limit + (index + 1)
						return {
							id,
							name: `用户${id}`,
							mobile: `150000000${id}`,
							integral: 10,
						}
					}),
					total: query.limit * 3,
				},
			})
		}, 200)
	})

const table = useTable({
	name: '用户',
	formdata: {
		/** ID */
		id: 0,
		/** 姓名 */
		name: '',
		/** 积分 */
		integral: 0,
		/** 手机号 */
		mobile: '',
	},
	getDataMethod: (query) => getUserList(query).then((res) => ({ rows: res.data.rows, total: res.data.total })),
	delDataMethod: (row) => {
		ElMessage.success('删除成功')
		return Promise.resolve({ msg: '删除成功' })
	},
})
table.getData()

const formDialogRef = ref()
const formRef = ref()

/** 新增或编辑按钮触发 */
const onEditFormSubmit = (formdata: typeof table.formdata) => {
	// 这里接收的 formdata 是经过 formDialogRef 修改后的
	return new Promise((resolve, rejcet) => {
		formRef.value.validate((valid, err) => {
			if (!valid) return rejcet()
			setTimeout(() => {
				resolve(true)
			}, 1000)
		})
	})
}

/** 表单验证规则 */
const form_rules = reactive<Partial<Record<string, FormItemRule | FormItemRule[]>>>({
	name: [
		{ required: true, message: '请填写姓名' },
		{ min: 3, message: '最少3个字符' },
	],
	integral: [
		{ required: true, message: '请填写积分' },
		{ validator: (rule, val) => val >= 0 && val <= 9999, message: '积分必须在0到9999之间' },
	],
})
</script>

<template>
	<div class="p-4">
		<x-table-head
			v-model:search-word="table.query.search_word"
			@search="table.getData()"
			@refresh="table.getData()"
		>
			<div class="flex-box">
				<el-button type="success" @click="formDialogRef.open()">创建用户</el-button>
			</div>
		</x-table-head>

		<el-table
			class="w-full shadow rounded hover:shadow-lg"
			v-loading="table.state.loading"
			border
			:data="table.data"
			:max-height="useTableHeight().value"
		>
			<el-table-column prop="id" label="#" width="80" align="center" />
			<el-table-column prop="name" label="姓名" />
			<el-table-column prop="mobile" label="电话" width="180" />
			<el-table-column prop="integral" label="积分" width="100" />
			<el-table-column prop="id" label="操作" width="180">
				<template #default="{ row }">
					<el-button type="primary" @click="formDialogRef?.open(row)">编辑</el-button>
					<el-button type="danger" @click="table.delRow(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<x-pagination
			v-model:index="table.query.index"
			v-model:limit="table.query.limit"
			:state="table.state"
			@current-change="table.getData()"
			@size-change=";(table.query.index = 1), table.getData()"
		/>

		<x-form-dialog
			ref="formDialogRef"
			v-model:formdata="table.formdata"
			:name="table.name"
			:onClickSubmit="onEditFormSubmit"
		>
			<el-form ref="formRef" class="pr-8" :model="table.formdata" :rules="form_rules" label-width="80px">
				<el-form-item label="昵称" prop="name">
					<el-input v-model="table.formdata.name" />
				</el-form-item>
				<el-form-item label="电话" prop="mobile">
					<el-input v-model="table.formdata.mobile" type="number" />
				</el-form-item>
				<el-form-item label="积分" prop="integral">
					<el-input-number v-model="table.formdata.integral" />
				</el-form-item>
			</el-form>
		</x-form-dialog>
	</div>
</template>
